<template>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="ruleFormRef">
        <el-form-item label="用户名：" prop="name">
            <el-input v-model="formInline.name" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search()">搜索</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="state.onlineData" stripe style="width: 100%" height="580">
        <el-table-column prop="username" label="用户名" fixed>
            <template #default="scope">
                {{scope.row.username}}
                &nbsp;
                <el-tag class="" type="success" :style="{'display': (scope.row.id === state.data1.id ? '':'none')}">
                    {{scope.row.id ==
                    state.data1.id ? "当前登录用户" : ""}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="loginTime" label="登录时间" />
        <el-table-column prop="ip" label="登录 IP" />
        <el-table-column prop="loginAddress" label="登录地点" />
        <el-table-column prop="address" label="操作" fixed="right">
            <template #default="scope">
                <el-popconfirm title="你确定立即登出此用户？" @confirm="handleEdit(scope.$index, scope.row)">
                    <template #reference>
                        <el-button :icon="SwitchButton" circle />
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { FormInstance, ElTable, ElTree, ElMessage } from 'element-plus'
import { getOnline, delOnline } from '../../apis/online'
import {
    SwitchButton
    ,
} from '@element-plus/icons-vue'

const formInline = reactive({
    name: '',
})


const state = reactive({
    onlineData: [] as any,
    data1: JSON.parse(localStorage.getItem('user') as any),
})
const ruleFormRef = ref<FormInstance>()

function search() {
    // const a = `keyy=${formInline.keyy}&valuee=${formInline.valuee}&tableName=${formInline.tableName}&fieldName=${formInline.fieldName}&pageSize=${state.pageSize}&pageNum=${state.pageNum}`
    getAllOnline(`username=${formInline.name}`)
}

const resetForm = (ruleForm: FormInstance | undefined) => {
    if (!ruleForm) return;
    ruleForm.resetFields();
    getAllOnline()
};
async function getAllOnline(data?: any) {
    const res = await getOnline(data)
    state.onlineData = res.data
}
async function deleteOne(data: any) {
    const res = await delOnline(data)
    console.log(res);
    if (res == "") {
        ElMessage.success("你已登出该用户")
        getAllOnline()
    }

}
const handleEdit = (index: number, row: any) => {
    console.log(index, row)
    deleteOne(row.id)


}


onMounted(() => {
    getAllOnline()
})
</script>

<style scoped>

</style>